<template>
	<view class="content">
		<view class="topimg">
			<image src="/static/images/logoTop.jpg" mode="widthFix"></image>
		</view>
		<view class="logon-text">
			欢迎注册
		</view>
		<view class="logon-text1">
			注册登录账号即可查看更多精彩
		</view>
		

		<view class="ipt">
			<view class="ipt-box">
				<uv-input placeholder="请输入手机号" border="none"></uv-input>
			</view>
		</view>

		<view class="ipt">
			<view class="ipt-box">
				<uv-input type="password" password placeholder="请设置密码" border="none"></uv-input>
			</view>
		</view>
		
		<view class="ipt">
			<view class="ipt-box">
				<uv-input type="password" password placeholder="请确认密码" border="none"></uv-input>
			</view>
		</view>

		<view class="ipt">
			<view class="ipt-box">
				<uv-input v-model="code" type="number" placeholder="请输入验证码" border="none">
					<!-- vue3模式下必须使用v-slot:suffix -->
					<template v-slot:suffix>
						<uv-code ref="uCode" @change="codeChange" :seconds="seconds"
							:changeText="`${seconds}秒后重新获取`"></uv-code>
						<uv-button @click="getCode" :text="tips" type="success" size="mini"></uv-button>
					</template>
				</uv-input>
			</view>
		</view>

		<view class="rule">
			<view class="fangkuai" hover-class="activeM" @click="gouXuan" v-if="checkFlag == false">

			</view>
			<view class="fangkuai active" hover-class="activeM" @click="gouXuan" v-if="checkFlag == true">
				<uv-icon name='checkmark' size='10' color='#fff'></uv-icon>
			</view>
			已阅读并同意 <span style="color: #546796;margin: 0rpx 10rpx;" @click="goRule">用户协议</span> 和 <span
				style="color: #546796;margin: 0rpx 10rpx;" @click="goRule">隐私政策</span>
		</view>

		<view class="btn-box">
			<view class="btn-box-con" hover-class="activeM">
				立即注册
			</view>
		</view>

		<view class="zhuce" hover-class="activeM" @click="goBack">
			已有账号 <span style="color: #E90D00;margin-left: 20rpx;">去登录</span>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl,
		http
	} from '@/utils/request'
	import emitter from '@/utils/emitter.js'
	import {
		showMsg
	} from '@/utils/showMsg'

	const checkFlag = ref(false)

	const tips = ref('获取验证码')
	const seconds = ref(60)
	const uCode = ref()

	const gouXuan = () => {
		checkFlag.value = !checkFlag.value
	}

	const goRule = () => {
		uni.navigateTo({
			url: '/subpackages/my/ruleList'
		})
	}

	const codeChange = (e) => {
		seconds.value -= 1
		tips.value = e

		if (seconds.value == 0) {
			seconds.value = 60
		}
	}

	const getCode = () => {
		if (uCode.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			setTimeout(() => {
				uni.hideLoading();
				showMsg('验证码已发送', 1500)
				uCode.value.start();
				getCodeNumber()
			}, 2000);
		} else {
			showMsg('倒计时结束后再重新获取', 1500);
		}
	}

	const getCodeNumber = async () => {

	}
	
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.topimg {
		width: 100%;

		image {
			width: 100% !important;
			height: 400rpx !important;
		}
	}

	.logon-text {
		width: 100%;
		padding: 0rpx 48rpx;
		font-weight: bold;
		font-size: 64rpx;
		color: #1A1C1E;
	}

	.logon-text1 {
		width: 100%;
		padding: 0rpx 48rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #9095A8;
		margin-top: 10rpx;
		margin-bottom: 80rpx;
	}

	.tab {
		width: 100%;
		margin-top: 80rpx;
		padding: 0rpx 48rpx;
		display: flex;
		margin-bottom: 40rpx;

		.tab-item {
			width: 30%;
			font-weight: 400;
			font-size: 28rpx;
			color: #9095A8;
		}

		.active {
			font-weight: 600;
			font-size: 30rpx;
			color: #000;
		}
	}

	.ipt {
		width: 100%;
		padding: 0rpx 48rpx;
		margin-bottom: 20rpx;

		.ipt-box {
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(228, 229, 231, 0.24);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #EDF1F3;
			display: flex;
			align-items: center;
			padding: 0rpx 28rpx;

			::v-deep .uv-button--success.data-v-1ac9ef43 {
				background-color: #e90d00;
				border-color: #e90d00;
			}
		}
	}

	.rule {
		width: 100%;
		margin-top: 36rpx;
		padding: 0rpx 48rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #9095A8;
		display: flex;
		align-items: center;

		.fangkuai {
			width: 22rpx;
			height: 22rpx;
			border-radius: 2rpx;
			border: 2rpx solid #9095A8;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.active {
			background-color: #e90d00;
			border: 2rpx solid #e90d00;
		}
	}

	.btn-box {
		width: 100%;
		margin-top: 50rpx;
		padding: 0rpx 48rpx;

		.btn-box-con {
			width: 100%;
			height: 88rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			background-color: #e90d00;
		}
	}

	.zhuce {
		width: 100%;
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #9095A8;
	}
</style>